<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<header class="header-wrapper main-header" th:fragment="title">
    <div class="header-inner-wrapper">
        <div class="logo-wrapper">
            <a href="" class="admin-logo">
                <img th:src="@{/static/picture/logo.png}" alt="">
            </a>
        </div>
        <div class="header-right">
            <div class="header-left">
                <div class="header-links">
                    <a href="javascript:void(0);" class="toggle-btn">
                        <span></span>
                    </a>
                </div>
            </div>
            <div class="header-controls">
                <div class="user-info-wrapper header-links">
                    <a href="javascript:void(0);" class="user-info">
                        <img th:src="@{/static/picture/user.jpg}" alt="" class="user-img">
                        <div class="blink-animation">
                            <span class="blink-circle"></span>
                            <span class="main-circle"></span>
                        </div>
                    </a>
                    <div class="user-info-box">
                        <div class="drop-down-header">
                            <h4 th:text="${user.getUsername()}"></h4>
                            <p th:text="${user.getRole().equals('user') ? '学生' : '管理员'}"></p>
                        </div>
                        <ul>
                            <li>
                                <a th:href="@{/api/auth/logout}">
                                    <i class="fas fa-sign-out-alt"></i>退出登录
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<aside class="sidebar-wrapper" th:fragment="aside">
    <div class="side-menu-wrap active">
        <ul class="main-menu in">
            <li sec:authorize="hasRole('admin')">
                <a th:href="@{/page/admin/index}">
                            <span class="icon-menu feather-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                     stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-package"><line x1="16.5" y1="9.4"
                                                                                                   x2="7.5"
                                                                                                   y2="4.21"></line><path
                                        d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline
                                        points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08"
                                                                                                x2="12" y2="12"></line></svg>
                            </span>
                    <span class="menu-text">借阅管理</span>
                </a>
            </li>
            <li sec:authorize="hasRole('admin')">
                <a th:href="@{/page/admin/book}">
                            <span class="icon-menu feather-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                     stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-truck"><rect x="1" y="3" width="15"
                                                                                                 height="13"></rect><polygon
                                        points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5"
                                                                                                    r="2.5"></circle><circle
                                        cx="18.5" cy="18.5" r="2.5"></circle></svg>
                            </span>
                    <span class="menu-text">图书管理</span>
                </a>
            </li>
            <li sec:authorize="hasRole('user')">
                <a th:href="@{/page/user/index}">
                            <span class="icon-menu feather-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                     stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-package"><line x1="16.5" y1="9.4"
                                                                                                   x2="7.5"
                                                                                                   y2="4.21"></line><path
                                        d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline
                                        points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08"
                                                                                                x2="12" y2="12"></line></svg>
                            </span>
                    <span class="menu-text">图书借阅</span>
                </a>
            </li>
            <li sec:authorize="hasRole('user')">
                <a th:href="@{/page/user/book}">
                            <span class="icon-menu feather-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                     stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-truck"><rect x="1" y="3" width="15"
                                                                                                 height="13"></rect><polygon
                                        points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5"
                                                                                                    r="2.5"></circle><circle
                                        cx="18.5" cy="18.5" r="2.5"></circle></svg>
                            </span>
                    <span class="menu-text">借阅管理</span>
                </a>
            </li>
        </ul>
    </div>
</aside>
</body>
</html>